<div animated fadeIn>
    <div class="row">
        <div class="col-md-2">
            <select id="relives" name="relives" class="form-control" (change)="markedWords()"
                    [(ngModel)]="keys">
                <option value="2">账号</option>
                <!--<option value="1">姓名</option>-->
            </select>
        </div>
        <div class="col-md-4">
            <input *ngIf="keys == 2" type="text" class="form-control btn-radius" [(ngModel)]="userName" placeholder="请输入查询账号">
            <!--<input *ngIf="conditionsData.key == 1" type="text" class="form-control btn-radius" [(ngModel)]="userName" placeholder="请输入查询姓名" >-->
        </div>
        <div class="col-md-3" style="padding: 0">
            <button class="btn btn-primary btn-radius" (click)="queryData()">查询</button>
            <button class="btn btn-success btn-radius" style="margin-left: 10px" routerLink="add">添加用户</button>
        </div>
    </div>
    <div style="margin-top: 30px" class="table-responsive">
        <table class="table table-center table-bordered table-responsive table-hover"
               style="font-size: 13px;min-width: 0px">
            <thead class="table-inverse">
            <tr>
                <td>序号</td>
                <td>账号</td>
                <td>姓名</td>
                <td>Email</td>
                <td>新增时间</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody class="tab-content">
            <tr *ngFor="let item of accountArr let i =index">
                <td>{{i+1}}</td>
                <td>{{item.username}}</td>
                <td>{{item.username}}</td>
                <td>{{item.email}}</td>
                <td>{{item.date_joined}}</td>
                <td>
                    <span class="removeBtn" *ngIf="item.id != 1 " style="margin-left: 10px"
                          (click)="deleteUser(item.id);smallModal.show()">删除</span>
                    <a href="javascript:;" style="margin-left: 10px" (click)="resetPassword(item.id);smallModal.show()">重置密码</a>
                </td>
            </tr>
            </tbody>
        </table>
        <p *ngIf="isNodata" class="noneData">暂无数据</p>
        <div style="float: right">
            <pagination [boundaryLinks]="true" [totalItems]="totalItems" [(ngModel)]="currentPage" itemsPerPage="10"
                        [maxSize]="maxSize" previousText="上一页" nextText="下一页" firstText="首页" lastText="末页"
                        (pageChanged)="pageChanged($event)"></pagination>
        </div>
    </div>


</div>
<div bsModal #smallModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-danger modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">提示</h5>
                <button type="button" class="close" (click)="smallModal.hide()" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="text-align: center">
                <p style="margin: 0px">{{modalText}}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" (click)="smallModal.hide()">取消</button>
                <button type="button" class="btn btn-danger" (click)="smallModal.hide();determination();">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>


<div *ngIf="delectModal" [config]="{ show: true }" (onHidden)="confirmshutdown()" bsModal #autoShownModal="bs-modal"
     class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm" [ngClass]="{'modal-success':issuccess,'modal-danger':!issuccess}">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title pull-left">提示</h4>
                <button type="button" class="close pull-right" aria-label="Close" (click)="confirmshutdown()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="text-align: center">
                <span>{{modelBody}}</span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn " [ngClass]="{'btn-success':issuccess,'btn-danger':!issuccess}"
                        (click)="confirmshutdown();">确定
                </button>
            </div>
        </div>
    </div>
</div>